<template>
	<view class="main">
		<view class="header">
			<u-swiper imgMode="scaleToFill" height="217px" :list="list" keyName="url" indicator indicatorMode="dot"
				circular :autoplay="true"></u-swiper>
		</view>
		<view class="focation">
			<view class="focation_view" v-for="(item,index) in classification" :key="index" @tap="goActivity(item.id)">
				<view class="focation_box">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="focation_text">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="focation_view" >
				<view class="focation_box">
					<image :src="memberImg" mode="aspectFill"></image>
					<view class="focation_text">
						{{memberNum}}
					</view>
				</view>
			</view>
		</view>
		<view class="one">
			<!-- <image src="../../static/img/image17.png" mode=""></image> -->
			<!-- <view class="msg" @tap="routerTo('/pageB/text?name=dynamics&title=公告')"> -->
			<view class="msg">
				<!-- <text v-if="text1.length == 0" style="color:rgb(105 105 105);">暂无公告</text> -->

				<u-notice-bar :text="text1" color="#EA504F"></u-notice-bar>

			</view>
		</view>
		<view class="the">
			<view class="tit">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <image lazy-load src="@/static/img/index1.png" mode=""></image> -->
				<!-- #endif -->
				<text>会员专区</text>
				<text style="margin-left: 20rpx;font-size: 24rpx; color:rgb(124 124 124)">甄选优品，会员专享</text>
			</view>

			<view class="empty">
				<u-empty v-if="goodsList.length == 0" text="暂无商品"></u-empty>
			</view>

			<view class="list">
				<view class="item" v-for="(item,index) in goodsList" :key="index"
					@tap="routerTo(`/pageB/goodDetail?id=${item.id}`)">
					<view class="left">
						<!-- #ifdef MP-WEIXIN -->
						<image lazy-load :src="item.image" mode=""></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<easy-loadimage class="image" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
						<!-- #endif -->
					</view>
					<view class="right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.member_price}} <text
								style="font-size: 12px;text-decoration: line-through;margin-left: 5px;">￥{{item.original_price}}</text>
						</view>
						<!-- <view class="go">
							<view class="in">
								立即购买
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="the">
			<view class="tit">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <image lazy-load src="@/static/img/index1.png" mode=""></image> -->
				<!-- #endif -->
				<text>消费积分专区</text>
				<text style="margin-left: 20rpx;font-size: 24rpx; color:rgb(124 124 124)">消费也能当钱花</text>
			</view>

			<view class="empty">
				<u-empty v-if="goodsLists.length == 0" text="暂无商品"></u-empty>
			</view>

			<view class="list">
				<view class="item" v-for="(item,index) in goodsLists" :key="index"
					@tap="routerTo(`/pageB/goodDetail?id=${item.id}`)">
					<view class="left">
						<!-- #ifdef MP-WEIXIN -->
						<image lazy-load :src="item.image" mode=""></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<easy-loadimage class="image" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
						<!-- #endif -->
					</view>
					<view class="right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.member_price}} <text
								style="font-size: 12px;text-decoration: line-through;margin-left: 5px;">￥{{item.original_price}}</text>
						</view>
						<!-- <view class="go">
							<view class="in">
								立即购买
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="the">
			<view class="tit">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <image lazy-load src="@/static/img/index1.png" mode=""></image> -->
				<!-- #endif -->
				<text>商城专区</text>
				<text style="margin-left: 20rpx;font-size: 24rpx; color:rgb(124 124 124)">甄选好物</text>
			</view>

			<view class="empty">
				<u-empty v-if="goodsList_g.length == 0" text="暂无商品"></u-empty>
			</view>

			<view class="list">
				<view class="item" v-for="(item,index) in goodsList_g" :key="index"
					@tap="routerTo(`/pageB/goodDetail?id=${item.id}`)">
					<view class="left">
						<!-- #ifdef MP-WEIXIN -->
						<image lazy-load :src="item.image" mode=""></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<easy-loadimage class="image" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
						<!-- #endif -->
					</view>
					<view class="right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.member_price}} <text
								style="font-size: 12px;text-decoration: line-through;margin-left: 5px;">￥{{item.original_price}}</text>
						</view>
						<!-- <view class="go">
							<view class="in">
								立即购买
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<u-modal confirmColor="#fff" :show="show3" :content="content" @confirm="downLoad"
			confirmButtonShape="circle"></u-modal>
	</view>
</template>

<script>
	import {
		banner,
		list,
		getConfigs,
		dynamics,
		Index,
		scates,
		getMembers
	} from '@/api/index.js'
	export default {
		data() {
			return {
				classification: [],
				memberImg: '/static/img/vip.png',
				memberNum: 0,
				scrollTop: 0,
				list: [],
				text1: '暂无公告',
				// 会员专区
				data: {
					category_id: 1,
					page: 1,
					is_recom: 1
				},
				goodsList: [],
				last_page: 1,

				// 消费专区
				datas: {
					category_id: 2,
					page: 1,
					is_recom: 1
				},
				goodsLists: [],
				last_pages: 1,

				// 商城专区
				datagoods: {
					category_id: 3,
					page: 1,
					is_recom: 1
				},
				goodsList_g: [],
				last_page_g: 1,
				show3: false,
				content: '您的版本不是最新版，请更新后使用',
			}
		},
		onPageScroll({
			scrollTop
		}) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// this.scrollTop = scrollTop;
		},
		onLoad() {
			/*#ifdef APP-PLUS */
			uni.getSystemInfo({
				success: (res) => {
					this.version = res.appWgtVersion;
					getConfigs({
						name: 'version'
					}).then((res) => {
						console.log(res)
						console.log(this.version)
						if (this.version != res.data.value) {
							this.show3 = true;
						}
					});
				}
			});
			/*#endif*/
			this.getIndex()
			this.getList()
			this.getLists()
			this.getGoods()
			this.getScates()
			this.getMembers()
		},
		onPullDownRefresh() {
			this.getIndex()
			if (this.data.page != 1) {
				this.data.page = 1
				this.getList()
			}
			if (this.datas.page != 1) {
				this.datas.page = 1
				this.getLists()
			}
			if (this.datagoods.page != 1) {
				this.datagoods.page = 1
				this.getGoods()
			}


			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.data.page == this.last_page) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.data.page++
				this.getList()
			}

			if (this.datas.page == this.last_pages) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.datas.page++
				this.getLists()
			}

			if (this.datagoods.page == this.last_pages) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.datagoods.page++
				this.getGoods()
			}
		},
		methods: {
			async getScates() {
				let res = await scates()
				this.classification = res.data
			},

			async getMembers() {
				let res = await getMembers(); // 调用接口
				if (res.code == 1) {
					// 将接口返回的数据赋值给 classification
					this.memberNum = res.data;
				}
			},



			downLoad() {
				uni.getSystemInfo({
					success: function(res) {
						uni.showLoading({
							title: '下载中'
						});
						uni.downloadFile({
							url: `https://www.yuexiangshidai.cn/yxsd.apk`,
							success: (res) => {
								console.log(res, '下载成功');
								if (res.statusCode === 200) {
									console.log('下载成功');
									uni.hideLoading();
									uni.showToast({
										title: '下载成功',
										icon: 'success'
									});
									uni.saveFile({
										tempFilePath: res.tempFilePath,
										success: function(res) {
											uni.openDocument({
												filePath: res.savedFilePath,
												success: function(res) {
													console.log(res,
														'打开安装包');
												}
											});
										},
										fail: (err) => {
											console.log(err, '打开安装包-失败');
										}
									});
								}
							},
							fail: (err) => {
								console.log(err, '下载失败');
								uni.hideLoading();
								uni.showToast({
									title: '下载失败,请检查网络',
									icon: 'none',
									duration: 1500
								});
							}
						});
					}
				});
			},
			getIndex() {
				banner().then(res => {
					res.data.forEach(item => {
						this.list.push(item.image)
					})
				})
				dynamics().then(res => {
					console.log(res.data.length)
					if (res.code == 1) {
						if (res.data.length > 0) {
							this.text1 = res.data[0].content
						}
					}
				})
			},
			getList() {
				if (this.data.page == 1) {
					this.goodsList = []
				}
				list(this.data).then(res => {
					if (res.code == 1) {
						this.last_page = res.data.last_page
						res.data.data.forEach(item => {
							this.goodsList.push(item)
						})
					}
				})
			},
			getLists() {
				if (this.datas.page == 1) {
					this.goodsLists = []
				}
				list(this.datas).then(res => {
					if (res.code == 1) {
						this.last_pages = res.data.last_page
						res.data.data.forEach(item => {
							this.goodsLists.push(item)
						})
					}
				})
			},

			getGoods() {
				if (this.datagoods.page == 1) {
					this.goodsList_g = []
				}
				list(this.datagoods).then(res => {
					if (res.code == 1) {
						this.last_page_g = res.data.last_page
						res.data.data.forEach(item => {
							this.goodsList_g.push(item)
						})
					}
				})
			},

			goActivity(id) {
				uni.navigateTo({
					url: '/pageB/goodsLists?id=' + id
				})
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		background-color: #f3f1f2;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;

		::v-deep.u-modal {
			background-color: #fff;

			.u-modal__title {
				color: #fff;
			}

			::v-deep.u-modal__content {
				color: #fff;
			}

			.u-modal__content__text {
				color: #fff;
				text-align: center;
			}
		}

		.focation {
			width: 100%;
			height: fit-content;
			margin-top: 10px;
			padding: 24rpx 0;
			background-color: #fff;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-row-gap: 16rpx;

			.focation_view {

				.focation_box {
					width: 100%;

					display: flex;
					flex-direction: column;
					align-items: center;

					.focation_text {
						width: 100%;
						text-align: center;
						line-height: 30px;
						font-size: 28rpx;
					}

					image {
						margin-bottom: 8rpx;
						// margin-left: 55rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
					}
				}
			}
		}

		.header {
			width: 100%;
			// height: 434rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.one {
			margin: 20rpx 0;
			padding: 20rpx 30rpx;
			background-color: #fff;
			color: #3d3d3d;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 40rpx;
			}

			.msg {
				flex: 1;
			}
		}

		.two {
			display: flex;
			align-items: center;
			padding: 30rpx 60rpx;
			background: linear-gradient(180deg, #fff 0%, #1D242C 100%);

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #fff;
				font-size: 24rpx;

				image {
					width: 92rpx;
					height: 92rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.the {
			flex: 1;
			padding: 0 24rpx;
			box-sizing: border-box;

			.tit {
				font-weight: 800;
				position: relative;
				// text-indent: 40rpx;
				// background-image: url(@/static/img/index1.png);
				// background-repeat: no-repeat;
				// background-size: 100% 100%;
				font-size: 32rpx;
				color: #000;
				padding: 24rpx;
				background-color: #fff;
				box-sizing: border-box;

				text {
					position: relative;
					z-index: 2;
				}

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.empty {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.list {
				padding: 10rpx 0;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 24rpx;
				box-sizing: border-box;



				.item {
					flex: 1;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					border-radius: 5rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
					overflow: hidden;

					.left {
						width: 100%;

						.image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}

						image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}
					}

					.right {
						width: 100%;
						display: flex;
						flex-direction: column;
						color: #000;
						padding: 24rpx;
						height: fit-content;
						justify-content: space-around;
						box-sizing: border-box;

						.name {
							font-size: 26rpx;
							font-weight: 700;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 24rpx;
						}

						.price {
							font-size: 30rpx;
							color: #EA504F;
						}

						.go {
							display: flex;

							.in {
								color: red;
								font-size: 24rpx;
								background: linear-gradient(180deg, #fff 3%, #fff 100%);
								padding: 10rpx 30rpx;
								border-radius: 200rpx;
							}
						}
					}
				}
			}
		}
	}
</style>